<template>
	<view class="content">

		<!-- 分类标签 -->
		<scroll-view class="category-scroll" scroll-x>
			<view class="category-list">
				<view class="category-item" v-for="(item, index) in categories" :key="index"
					:class="{ active: currentCategory === index }" @click="switchCategory(index)">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>

		<!-- 摄影师列表 -->
		<scroll-view class="photographer-list" scroll-y>
			<view class="photographer-item" v-for="(item, index) in photographers" :key="index"
				@click="goToDetail(item)">
				<!-- 摄影师信息 -->
				<view class="photographer-info">
					<ImgVue :src="item.avatar" class="avatar"/>
					<view class="info-content">
						<view class="name-rating">
							<text class="name">{{item.userName}}</text>
							<view class="rating">
								<uni-icons v-for="i in 5" :key="i" :type="i <= item.rating ? 'star-filled' : 'star'"
									size="16" :color="i <= item.rating ? '#FFD700' : '#999'">
								</uni-icons>
								<text class="score">{{item.score}}</text>
							</view>
						</view>
						<text class="title">{{item.title}}</text>
						<text class="description">{{item.description}}</text>
					</view>
				</view>
				<!-- 作品展示 -->
				<view class="works">
					<image v-for="(work, workIndex) in item.works" :key="workIndex" :src="work" class="work-image"
						mode="aspectFill">
					</image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getCategoryList
	} from '../../../api/category'; // 引入你的 API 方法
import { getPhotoGrapher } from '../../../api/photographer';
import ImgVue from '../../../components/Img/Img.vue';
	// 分类数据
	const categories = ref(['全部风格', '婚礼摄影', '人像写真', '街拍', '私影'])
	const currentCategory = ref(0)

	// 切换分类
	const switchCategory = (index) => {
		currentCategory.value = index
		// 这里可以添加分类切换后的其他逻辑，比如筛选摄影师列表
	}

	// 跳转到摄影师详情页
	const goToDetail = (photographer) => {
		uni.navigateTo({
			url: `/pages/tabbar-2-detail/tabbar-2-detail?index=${photographer.id}`
		});
	}

	// 修改 photographers 数据，添加 id 字段
	const photographers = ref([{
			id: '1',
			avatar: '/static/avatars/photographer1.jpg',
			name: '陈梦晨',
			rating: 4,
			score: '4.8',
			title: '婚礼摄影师 / 人像摄影师',
			description: '擅长自然光人像摄影，注重捕捉真实情感瞬间，8年专业摄影经验',
			works: [
				'/static/works/1-1.jpg',
				'/static/works/1-2.jpg',
				'/static/works/1-3.jpg'
			]
		},
		{
			id: '2',
			avatar: '/static/avatars/photographer2.jpg',
			name: '林子轩',
			rating: 5,
			score: '5.0',
			title: '时尚摄影师 / 商业摄影师',
			description: '专注时尚摄影与商业广告拍摄，作品曾发表于VOGUE等知名杂志',
			works: [
				'/static/works/2-1.jpg',
				'/static/works/2-2.jpg',
				'/static/works/2-3.jpg'
			]
		},
		{
			id: '3',
			avatar: '/static/avatars/photographer3.jpg',
			name: '张雨晴',
			rating: 4,
			score: '4.2',
			title: '街拍摄影师 / 生活摄影师',
			description: '善于捕捉城市街头的独特瞬间，擅长黑白摄影，独特的艺术视角',
			works: [
				'/static/works/3-1.jpg',
				'/static/works/3-2.jpg',
				'/static/works/3-3.jpg'
			]
		}
	])
	
	// 获取分类数据
	const fetchCategories = async () => {
		try {
			const response = await getCategoryList(); // 获取分类数据
			if (response.data) {
				// 在分类数据的开头插入“全部”
				categories.value = [{
						id: null,
						name: '全部'
					}, // 设置 id 为 null
					...response.data, // 追加其余分类数据
				];
			} else {
				categories.value = [{
					id: null,
					name: '全部'
				}]; // 如果没有分类数据，也添加“全部”
			}
		} catch (error) {
			console.error('获取分类数据失败:', error);
			// 如果分类数据获取失败，也确保至少有“全部”
			categories.value = [{
				id: null,
				name: '全部'
			}];
		}
	};
	
	
const fetchPhotoGrapher = async () => {
	try {
		const response = await getPhotoGrapher();
		photographers.value = response.data.map(item => ({
			...item,
			// Mock 数据补充
			rating: Math.floor(Math.random() * 5) + 1, // 随机评分 1-5
			score: (4 + Math.random()).toFixed(1), // 随机评分 4.0-5.0
			works: [ // 使用 Lorem Picsum 动态生成不同的图片
				`https://picsum.photos/seed/${item.id}-1/400/300`,
				`https://picsum.photos/seed/${item.id}-2/400/300`,
				`https://picsum.photos/seed/${item.id}-3/400/300`
			],
			title: item.title || '专业摄影师', // Mock 职位
			description: item.description || '擅长各类摄影，捕捉每个精彩瞬间' // Mock 简介
		}));
		console.log(photographers.value);
	} catch (error) {
		console.error('获取摄影师数据失败:', error);
	}
};

	// 页面加载时，初始化数据
	onLoad(() => {
		fetchCategories();
		fetchPhotoGrapher();
	});
</script>

<style scoped>
	.content {
		padding: 20rpx;
		background-color: #F9FAFB;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.search-input {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.category-scroll {
		margin-bottom: 20rpx;
		white-space: nowrap;
	}

	.category-list {
		display: inline-flex;
		padding: 10rpx 0;
	}

	.category-item {
		padding: 10rpx 30rpx;
		margin: 0 10rpx;
		background-color: #fff;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		transition: all 0.3s ease;
		/* 添加过渡效果 */
	}

	.category-item.active {
		background-color: #007AFF;
		color: #fff;
		transform: scale(1.05);
		/* 选中时略微放大 */
		box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
		/* 添加阴影效果 */
	}

	/* 添加点击反馈效果 */
	.category-item:active {
		opacity: 0.8;
		transform: scale(0.95);
	}

	.photographer-list {
		height: calc(100vh - 200rpx);
	}

	.photographer-item {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.photographer-item:active {
		transform: scale(0.98);
		opacity: 0.9;
	}

	.photographer-info {
		display: flex;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 20rpx;
	}

	.info-content {
		flex: 1;
	}

	.name-rating {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.rating {
		display: flex;
		align-items: center;
	}

	.score {
		margin-left: 10rpx;
		color: #666;
		font-size: 28rpx;
	}

	.title {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
		display: block;
	}

	.description {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.works {
		display: flex;
		gap: 10rpx;
	}

	.work-image {
		flex: 1;
		height: 200rpx;
		border-radius: 8rpx;
	}

	/* 隐藏横向滚动条 */
	.category-scroll ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	/* 隐藏纵向滚动条 */
	.photographer-list ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	/* 添加滚动视图样式 */
	.category-scroll,
	.photographer-list {
		scrollbar-width: none;
		/* Firefox */
		-ms-overflow-style: none;
		/* IE and Edge */
	}
</style>